<template>
  <div class="cont-sidebar">
    <div class="cs-title" v-if="!school">{{ name }}</div>
    <div v-else>
      <div class="cs-title">{{ areaName }}</div>
    </div>
    <div class="area-name" v-if="areaName!='null' && !school && areaName">{{areaName}}</div>
    <ul class="sidebar-list cs-list">
      <li v-for="(item, idx) in siderList" :class="[{active: activeId == item.id}]" :key="idx" @click="navTo(item, idx)">
        <el-tooltip class="item" effect="dark" :content="item.name" placement="right-start" v-if="item.name.length> 10">
          <el-button>
            {{ item && item.name ? item.name : item}} {{item.name.length}}
          </el-button>
        </el-tooltip>
        <span v-else>
          {{ item && item.name ? item.name : item}}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'contSidebar',
  props: {
    name: {
      type: String,
      default: ''
    },
    siderList: {
      type: Array,
      default: null
    },
    activeItem: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      activeId: this.activeItem,
      areaName: '',
      school: false
    }
  },
  methods: {
    setActiveId (val) {
      this.activeId = val
    },
    navTo (item, idx) {
      this.activeId = item.id
      this.$emit('handleAcitve', item)
    }
  },
  mounted () {
    let userData = JSON.parse(sessionStorage.getItem('userData'))
    if (userData.roleKey === 'school') {
      this.areaName = sessionStorage.getItem('schoolName')
      this.school = true
    } else {
      this.areaName = sessionStorage.getItem('countyName') ? sessionStorage.getItem('countyName') : ''
    }
  }
}
</script>
<style>
  .cs-title {
    padding: 0 22px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-bottom: 1px solid #31363F;
    font-size: 16px;
    font-weight: bold;
  }
  .area-name {
    color: #fff;
    font-size: 16px;
    padding-left: 22px;
  }
  .sidebar-list.cs-list li{
    padding-left: 36px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-right: 6px;
  }
  .sidebar-list.cs-list li button {
    background: transparent;
    width: 100%;
    text-align: left;
    padding-left: 0px;
    border: 1px solid transparent;
  }
  .sidebar-list.cs-list li button span {
    color: #fff;
    padding-left: 0;
  }
  .sidebar-list.cs-list li button:hover span{
    color: #4177ff;
  }
</style>
